<!-- directive:title 提示信息展示样式 -->
<!-- directive:breadcrumb 提示信息 -->
<div class='panel-body'>
    <style>
      .typeahead-demo .custom-popup-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        background-color: #f9f9f9;
      }

      .typeahead-demo .custom-popup-wrapper > .message {
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        color: #868686;
      }

      .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
        position: static;
        float: none;
        display: block;
        min-width: 160px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }
    </style>

    <script type="text/ng-template" id="customTemplate.html">
      <a>
          <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
          <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
      </a>
    </script>

    <script type="text/ng-template" id="customPopupTemplate.html">
      <div class="custom-popup-wrapper"
         ng-style="{top: position().top+'px', left: position().left+'px'}"
         style="display: block;"
         ng-show="isOpen() && !moveInProgress"
         aria-hidden="{{!isOpen()}}">
        <p class="message">select location from drop down.</p>

        <ul class="dropdown-menu" role="listbox">
          <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
            ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
            <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
          </li>
        </ul>
      </div>
    </script>
    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue" class="form-control">

    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>

    <h4>ngModelOptions support</h4>
    <pre>Model: {{ngModelOptionsSelected | json}}</pre>
    <input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

    <h4>Custom templates for results</h4>
    <pre>Model: {{customSelected | json}}</pre>
    <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

    <h4>Custom popup templates for typeahead's dropdown</h4>
    <pre>Model: {{customPopupSelected | json}}</pre>
    <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
    <pre>
            它非常好地集成到AngularJS中，因为它使用了select指令语法的一个子集 ，它非常灵活。支持的表达式是：

        标注为价值在sourceArray
        选择作为标签的价值在sourceArray
        的sourceArray表达可以使用一个特殊$viewValue的是对应于输入的内部输入的值的变量。

        该指令适用于promises，这意味着您可以轻松地使用$http服务检索匹配。

        uib-typeahead设置
        ng-model $  - 可分配的角度表达式以数据绑定到。

        ng-model-options $ - ng-model的选项（参见ng-model-options指令）。目前支持debounce和getterSetter选项。

        typeahead-append-to $  （默认值：null） -如果该预输入弹出被附加到一个元素，而不是父元素？

        typeahead-append-to-body $  （默认值：false） -如果该预输入弹出被追加到$身体，而不是父元素？

        typeahead-editable $  （默认值：true） -它应该限制模型值仅从弹出所选的人？

        typeahead-focus-first $  （默认值：true） -如果第一个匹配自动为您键入的重点？

        typeahead-focus-on-select （默认值：true） -在选择，聚焦预输入指令与相关联的输入元件。

        typeahead-input-formatter  （默认值：undefined） -选择后格式化NG-模型的结果。

        typeahead-is-open $  （缺省：angular.noop） -绑定到，表明如果下拉是开放的变量。

        typeahead-loading $  （缺省：angular.noop） -结合于指示是否正在异步检索匹配的变量。

        typeahead-min-length $  （默认值：1） -字符的最小无需要提前键入踢，在之前输入。必须大于或等于0。

        typeahead-no-results $  （缺省：angular.noop） -绑定到，表明如果没有发现匹配的结果的变量。

        typeahead-should-select($event) $  （默认值：null） -当一个执行的回调keyup可能引发选择事件发生。仅当此函数返回true时才会进行选择。

        typeahead-on-select($item, $model, $label, $event) $  （缺省：null） -当选择一个匹配执行的回调。如果未从用户事件触发选择，则可以取消定义$ event。

        typeahead-popup-template-url （默认值：uib/template/typeahead/typeahead-popup.html） -设置自定义弹出模板。

        typeahead-select-on-blur $  （默认值：false） -在模糊，选择当前突出显示的匹配。

        typeahead-select-on-exact $  （默认值：false） -自动选择项目时，它是完全用户输入相匹配的只有一个。

        typeahead-show-hint $  （默认值：false） -当第一个选项与显示提示。

        typeahead-template-url （默认值：uib/template/typeahead/typeahead-match.html） -设置自定义项目模板。

        typeahead-wait-ms $  （默认值：0） -预输入踢，在之前输入最后一个字符后最小的等待时间。

        uib-typeahead $ - 理解Angular表达式（参见select指令）。
    </pre>
</div>

